<template>
    <div class="modify-password-containner">
        <div class="pass-top-title">修改密码</div>
        <div class="wrapper">
            <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules"> 
                <el-row :gutter="41" class='input-hidden'>
                    <el-col :span="10">
                        <el-input name="old-pwd" type="password" disabled ></el-input>
                        <el-input name="old-pwd" type="password" disabled ></el-input>
                    </el-col>
                </el-row>
                <el-form-item label="原密码" class="el-form-label-title" prop="password">
                    <el-input v-model="ruleForm.password" class="el-form-input"  placeholder="请输入原密码" ></el-input>
                </el-form-item>
                 <el-form-item label="新密码" class="el-form-label-title" prop="newPassword">
                    <el-input v-model="ruleForm.newPassword" class="el-form-input"  type="password" placeholder="密码长度为6~16个字符，仅支持字母、数字"></el-input>
                </el-form-item>
                 <el-form-item label="确认密码" class="el-form-label-title" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword" class="el-form-input" placeholder="请输入确认密码" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="back-to re-button" @click="backto">返回</el-button>
                    <el-button type="primary" class="edit-su-button re-button" :loading="buttonLoading" @click="submitForm('ruleForm')">完成修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { updatePassword, validatePasswordLib } from 'api/userManage';
import sha256 from 'sha256';
export default {
    name: 'modifyPass',
    data() {
        var validatePassword = (rule, value, callback) => {

            if (value === '') {
                callback(new Error('原始密码不能为空！'));
            } else {
                if (value) {
                    validatePasswordLib(sha256(value)).then((data) => {
                        // 验证通过
                        callback();
                    }).catch(e => {
                        // console.log(e);
                        callback(new Error('原始密码错误！'));
                    });
                }
                
                if (this.ruleForm.newPassword !== '') {
                    this.$refs.ruleForm.validateField('newPassword');
                }
            }
        };
        var validateNewPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else if (value == this.ruleForm.password) {
                callback(new Error('新密码不能与原始密码相同！'));
            } else if (!/^[a-zA-Z0-9]{6,16}$/.test(value)) {
                callback(new Error('新密码由6~16位英文、数字所组成！'));
            } else {
                if (this.ruleForm.newPassword !== ''&&this.ruleForm.confirmPassword !=='') {
                    this.$refs.ruleForm.validateField('confirmPassword');
                }
                callback();
            }
        };
        var validateConfirmPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('确认密码不能为空！'));
            } else if (value !== this.ruleForm.newPassword) {
                callback(new Error('两次密码输入不一致！'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                password: '',
                newPassword: '',
                confirmPassword: ''
            },
            rules: {
                password: [
                    { required: true, message: '输入原密码', trigger: 'blur' },
                    { validator: validatePassword, trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '输入新密码', trigger: 'blur' },
                    { validator: validateNewPassword, trigger: 'blur,change' }
                ],
                confirmPassword: [
                    { required: true, message: '确认密码不能为空！', trigger: 'blur' },
                    { validator: validateConfirmPassword, trigger: 'blur,change' }
                ]
            },
            buttonLoading: false
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this._updatePassword(sha256(this.ruleForm.password), sha256(this.ruleForm.newPassword), sha256(this.ruleForm.confirmPassword));
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        backto() {
            this.$router.go(-1);
        },
        _updatePassword(password, newPassword, confirmPassword) {
            this.buttonLoading = true;
            updatePassword(password, newPassword, confirmPassword).then((data) => {
                this.buttonLoading = false;
                if (data.status == 200) {
                    this.$message({
                        message: '修改密码成功！',
                        type: 'success'
                    });
                    this.$router.go(-1);
                    this.$refs[formName].reset();
                }
            }).catch(e => {
                this.buttonLoading = false;
                // console.log('失败');   
            })
        }
    }
}
</script>
<style lang="scss">
    $errColor: #ff4949;
    .modify-password-containner {
        height: 100%;
        background: #F7F7F9;
        .pass-top-title {
            height: 80px;
            text-indent: 460px;
            font-size: 30px;
            line-height: 80px;
            color: #666;
            background: #fff;
            border-bottom: 1px solid #EEEEF0;
            box-shadow: 0 1px 2px rgba(238,238,240,.5) 
        }
        .wrapper {
            width: 440px;
            margin: 148px auto 0;
        }
        .el-form-label-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 14px;
            color: #333;
            .el-form-input, .el-input__inner {
                height: 40px;
                line-height: 40px;
            }

        }
        
        .re-button {
            width: 100px;
            height: 40px;
        }
        .edit-su-button {
            float: right;
        }
        .el-form-item__error {
            font-size: 14px;
            margin-top: 8px;
        }
        .input-hidden {
            visibility: hidden;
            position: absolute;
            z-index: -1;
        }
        .is-error .el-input__inner {
            border: 1px solid $errColor;   
        }
    }
</style>
